<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干线协调优化平台 - 历史方案</title>
    <link rel="stylesheet" href="../components/libs/fontawesome/6.7.2/css/all.min.css" />
    <link rel="stylesheet" href="../components/common/base.css">
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./history.css" />
</head>

<body class="bg-dark-gradient">
    <!-- 顶部导航组件 -->
    <header class="layout-header">
        <!-- Logo区域 -->
        <div class="layout-logo">
            <i class="fas fa-traffic-light logo-icon"></i>
            <span class="logo-text">干线协调优化平台</span>
        </div>
        
        <!-- 弹性空间 -->
        <div class="header-spacer"></div>
        
        <!-- 业务菜单 -->
        <nav class="header-nav">
            <a href="index.html" class="nav-item" data-action="home">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="greenwave-sections.html" class="nav-item" data-action="sections">
                <i class="fas fa-road"></i>
                <span>绿波路段</span>
            </a>
            <a href="cal.html" class="nav-item" data-action="greenwave">
                <i class="fas fa-calculator"></i>
                <span>绿波计算</span>
            </a>
            <a href="tracking.html" class="nav-item" data-action="tracking">
                <i class="fas fa-route"></i>
                <span>绿波效果跟踪</span>
            </a>
            <a href="history.html" class="nav-item active" data-action="history">
                <i class="fas fa-history"></i>
                <span>历史方案</span>
            </a>
            <a href="work.html" class="nav-item" data-action="work">
                <i class="fas fa-clipboard-list"></i>
                <span>工作记录</span>
            </a>
        </nav>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
        <div class="history-container">
            <!-- 页面标题区域 -->
            <header class="history-header">
                <div class="history-title">
                    <i class="fas fa-history"></i>
                    <h1>历史优化方案</h1>
                    <span class="subtitle">查看和管理绿波协调优化历史方案</span>
                </div>
                <div class="history-stats">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-folder"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">156</div>
                            <div class="stat-label">总方案数</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon success">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">89</div>
                            <div class="stat-label">已实施</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon warning">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">23</div>
                            <div class="stat-label">待审核</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon info">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">18.5%</div>
                            <div class="stat-label">平均提升</div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 搜索筛选区域 -->
            <section class="filter-section">
                <div class="filter-container">
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-calendar"></i>
                            创建时间
                        </label>
                        <div class="filter-inputs">
                            <input type="date" class="filter-input" value="2024-01-01">
                            <span class="filter-separator">至</span>
                            <input type="date" class="filter-input" value="2024-12-31">
                        </div>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-map-marker-alt"></i>
                            涉及路段
                        </label>
                        <select class="filter-select">
                            <option value="">全部路段</option>
                            <option value="zhenzhou">振州路段</option>
                            <option value="yingbin">迎宾路段</option>
                            <option value="fenghuang">凤凰路段</option>
                            <option value="yuya">榆亚路段</option>
                            <option value="shengli">胜利路段</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-user"></i>
                            创建人员
                        </label>
                        <select class="filter-select">
                            <option value="">全部人员</option>
                            <option value="pengyang">彭杨</option>
                            <option value="suzhongjie">苏忠节</option>
                            <option value="qiuzhiwen">丘志文</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-flag"></i>
                            方案状态
                        </label>
                        <select class="filter-select">
                            <option value="">全部状态</option>
                            <option value="implemented">已实施</option>
                            <option value="pending">待审核</option>
                            <option value="draft">草稿</option>
                            <option value="rejected">已驳回</option>
                        </select>
                    </div>
                    
                    <div class="filter-actions">
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i>
                            搜索
                        </button>
                        <button class="btn btn-outline">
                            <i class="fas fa-redo"></i>
                            重置
                        </button>
                    </div>
                </div>
            </section>

            <!-- 历史方案列表区域 -->
            <section class="schemes-section">
                <div class="section-header">
                    <div class="section-title">
                        <i class="fas fa-list"></i>
                        优化方案列表
                    </div>
                    <div class="section-actions">
                        <button class="btn btn-outline">
                            <i class="fas fa-download"></i>
                            批量导出
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-plus"></i>
                            新建方案
                        </button>
                    </div>
                </div>

                <!-- 方案卡片网格 -->
                <div class="schemes-grid">
                    <!-- 方案卡片1 -->
                    <div class="scheme-card">
                        <div class="scheme-header">
                            <div class="scheme-status status-implemented">
                                <i class="fas fa-check-circle"></i>
                                已实施
                            </div>
                            <div class="scheme-actions">
                                <button class="action-btn" title="查看详情">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="action-btn" title="编辑方案">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="action-btn" title="复制方案">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="scheme-content">
                            <h3 class="scheme-title">振州路-裕民路绿波优化方案V2.1</h3>
                            <p class="scheme-description">针对振州路与裕民路交叉口的绿波协调优化，通过调整信号配时提升通行效率</p>
                            
                            <div class="scheme-details">
                                <div class="detail-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>涉及路口：振州路-裕民路</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-clock"></i>
                                    <span>创建时间：2024-06-03 15:43</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-user"></i>
                                    <span>创建人员：彭杨</span>
                                </div>
                            </div>
                            
                            <div class="scheme-metrics">
                                <div class="metric-item">
                                    <div class="metric-label">延误降低</div>
                                    <div class="metric-value success">-23.5%</div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-label">速度提升</div>
                                    <div class="metric-value success">+15.2%</div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-label">绿波效率</div>
                                    <div class="metric-value success">87%</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 方案卡片2 -->
                    <div class="scheme-card">
                        <div class="scheme-header">
                            <div class="scheme-status status-pending">
                                <i class="fas fa-clock"></i>
                                待审核
                            </div>
                            <div class="scheme-actions">
                                <button class="action-btn" title="查看详情">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="action-btn" title="编辑方案">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="action-btn" title="复制方案">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="scheme-content">
                            <h3 class="scheme-title">迎宾路-荔枝沟路协调优化方案</h3>
                            <p class="scheme-description">优化迎宾路与荔枝沟路路口的信号配时，减少车辆等待时间，提升整体通行效率</p>
                            
                            <div class="scheme-details">
                                <div class="detail-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>涉及路口：迎宾路-荔枝沟路</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-clock"></i>
                                    <span>创建时间：2024-04-21 16:22</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-user"></i>
                                    <span>创建人员：苏忠节</span>
                                </div>
                            </div>
                            
                            <div class="scheme-metrics">
                                <div class="metric-item">
                                    <div class="metric-label">预计延误降低</div>
                                    <div class="metric-value warning">-18.3%</div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-label">预计速度提升</div>
                                    <div class="metric-value warning">+12.8%</div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-label">绿波效率</div>
                                    <div class="metric-value warning">82%</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 方案卡片3 -->
                    <div class="scheme-card">
                        <div class="scheme-header">
                            <div class="scheme-status status-implemented">
                                <i class="fas fa-check-circle"></i>
                                已实施
                            </div>
                            <div class="scheme-actions">
                                <button class="action-btn" title="查看详情">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="action-btn" title="编辑方案">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="action-btn" title="复制方案">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="scheme-content">
                            <h3 class="scheme-title">凤凰路-河东路绿波协调方案</h3>
                            <p class="scheme-description">红树林路口区域的绿波协调优化，重点解决高峰期拥堵问题</p>
                            
                            <div class="scheme-details">
                                <div class="detail-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>涉及路口：凤凰路-河东路</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-clock"></i>
                                    <span>创建时间：2024-03-06 19:17</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-user"></i>
                                    <span>创建人员：苏忠节</span>
                                </div>
                            </div>
                            
                            <div class="scheme-metrics">
                                <div class="metric-item">
                                    <div class="metric-label">延误降低</div>
                                    <div class="metric-value success">-31.2%</div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-label">速度提升</div>
                                    <div class="metric-value success">+22.5%</div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-label">绿波效率</div>
                                    <div class="metric-value success">91%</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 方案卡片4 -->
                    <div class="scheme-card">
                        <div class="scheme-header">
                            <div class="scheme-status status-draft">
                                <i class="fas fa-edit"></i>
                                草稿
                            </div>
                            <div class="scheme-actions">
                                <button class="action-btn" title="查看详情">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="action-btn" title="编辑方案">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="action-btn" title="复制方案">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="scheme-content">
                            <h3 class="scheme-title">胜利路-跃进路优化方案（未完成）</h3>
                            <p class="scheme-description">正在制定中的胜利路与跃进路交叉口绿波优化方案</p>
                            
                            <div class="scheme-details">
                                <div class="detail-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>涉及路口：胜利路-跃进路</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-clock"></i>
                                    <span>创建时间：2024-03-11 15:49</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-user"></i>
                                    <span>创建人员：苏忠节</span>
                                </div>
                            </div>
                            
                            <div class="scheme-metrics">
                                <div class="metric-item">
                                    <div class="metric-label">完成进度</div>
                                    <div class="metric-value info">65%</div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-label">最后编辑</div>
                                    <div class="metric-value info">2天前</div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-label">状态</div>
                                    <div class="metric-value info">编辑中</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 方案卡片5 -->
                    <div class="scheme-card">
                        <div class="scheme-header">
                            <div class="scheme-status status-implemented">
                                <i class="fas fa-check-circle"></i>
                                已实施
                            </div>
                            <div class="scheme-actions">
                                <button class="action-btn" title="查看详情">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="action-btn" title="编辑方案">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="action-btn" title="复制方案">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="scheme-content">
                            <h3 class="scheme-title">榆亚路-鹿岭路绿波优化方案</h3>
                            <p class="scheme-description">鹿岭路口区域的绿波协调配置，优化旅游高峰期的交通流量</p>
                            
                            <div class="scheme-details">
                                <div class="detail-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>涉及路口：榆亚路-鹿岭路</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-clock"></i>
                                    <span>创建时间：2024-02-24 09:51</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-user"></i>
                                    <span>创建人员：苏忠节</span>
                                </div>
                            </div>
                            
                            <div class="scheme-metrics">
                                <div class="metric-item">
                                    <div class="metric-label">延误降低</div>
                                    <div class="metric-value success">-19.8%</div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-label">速度提升</div>
                                    <div class="metric-value success">+14.3%</div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-label">绿波效率</div>
                                    <div class="metric-value success">84%</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 方案卡片6 -->
                    <div class="scheme-card">
                        <div class="scheme-header">
                            <div class="scheme-status status-rejected">
                                <i class="fas fa-times-circle"></i>
                                已驳回
                            </div>
                            <div class="scheme-actions">
                                <button class="action-btn" title="查看详情">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="action-btn" title="编辑方案">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="action-btn" title="复制方案">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="scheme-content">
                            <h3 class="scheme-title">科技城路-创意路协调方案</h3>
                            <p class="scheme-description">科技城区域的绿波协调方案，因技术参数不合规被驳回</p>
                            
                            <div class="scheme-details">
                                <div class="detail-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>涉及路口：科技城路-创意路</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-clock"></i>
                                    <span>创建时间：2024-03-26 16:04</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-user"></i>
                                    <span>创建人员：丘志文</span>
                                </div>
                            </div>
                            
                            <div class="scheme-metrics">
                                <div class="metric-item">
                                    <div class="metric-label">驳回原因</div>
                                    <div class="metric-value error">参数不合规</div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-label">审核人</div>
                                    <div class="metric-value error">系统管理员</div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-label">驳回时间</div>
                                    <div class="metric-value error">3月28日</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分页器 -->
                <div class="table-pagination">
                    <div class="pagination-info">
                        显示 1-6 项，共 156 项方案
                    </div>
                    <div class="pagination-controls">
                        <button class="pagination-btn disabled">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="pagination-btn active">1</button>
                        <button class="pagination-btn">2</button>
                        <button class="pagination-btn">3</button>
                        <button class="pagination-btn">...</button>
                        <button class="pagination-btn">26</button>
                        <button class="pagination-btn">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </section>
        </div>
    </main>

</body>

</html> 